<template class="firstpage">
  <div>

    <div class="boxMargin">
      <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="demo-ruleForm">
        <el-form-item label="主图视频名称：" prop="videoName">
          {{ form.videoName }}
        </el-form-item>
        <el-form-item label="主图视频简介：">
          {{ form.videoDesc }}
        </el-form-item>
        <el-form-item label="主图视频：" prop="videoUrl">
          <div class="listImg">
            <div v-if="form.videoUrl != ''" class="drawing_div">
              <video :src="form.videoUrl" class="avatar" controls="controls" style="max-width:100%;max-height:100%">您的浏览器不支持视频播放</video>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="商详视频名称：" prop="videoNameFu">
          {{ form.videoNameFu }}
        </el-form-item>
        <el-form-item label="商详视频简介：">
          {{ form.videoDescFu }}
        </el-form-item>
        <el-form-item label="商详视频：" prop="videoUrlFu">
          <div class="listImg">
            <div v-if="form.videoUrlFu != ''" class="drawing_div">
              <video :src="form.videoUrlFu" class="avatar" controls="controls" style="max-width:100%;max-height:100%">您的浏览器不支持视频播放</video>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>

import $ from 'jquery'
import _validate from '../../../../../framework/commonJs/wptx_validate'
import _tools from '../../../../../framework/commonJs/wptx_tools'
import _common from '../../../../../framework/commonJs/wptx_common'
import _api from '@/framework/API/generalItem'
import { global } from '../../../../../filter/global-api'
const _FUNCTION_NAME = ''
export default {
  filters: {},

  data() {
    const videoNameDator = (rule, value, callback) => {
      if (this.form.videoUrl != undefined && this.form.videoUrl != null && this.form.videoUrl != '') {
        if (value == undefined || value == null || value == '') {
          callback(new Error('请输入主图视频名称'))
        }
      }
      callback()
    }
    const videoNameFuDator = (rule, value, callback) => {
      if (this.form.videoUrlFu != undefined && this.form.videoUrlFu != null && this.form.videoUrlFu != '') {
        if (value == undefined || value == null || value == '') {
          callback(new Error('请输入商详视频名称'))
        } else {
          if (value == this.form.videoName) {
            callback(new Error('商详视频名称不能和主图视频名称相同'))
          }
        }
      }
      callback()
    }
    const videoUrlDator = (rule, value, callback) => {
      if (this.form.videoName != undefined && this.form.videoName != null && this.form.videoName != '') {
        if (value == undefined || value == null || value == '') {
          callback(new Error('请上传主图视频'))
        }
      }
      callback()
    }
    const videoUrlFuDator = (rule, value, callback) => {
      if (this.form.videoNameFu != undefined && this.form.videoNameFu != null && this.form.videoNameFu != '') {
        if (value == undefined || value == null || value == '') {
          callback(new Error('请上传商详视频'))
        }
      }
      callback()
    }
    return {

      tableData: [],

      searchData: {
        fvideoName: '' // 视频名称
      },

      searchDataBuffer: {
        fvideoName: '' // 视频名称
      },

      pageData: {
        pageNo: 1,
        pageSize: 10,
        total: 1,
        pageSizes: [10, 20, 50, 100]
      },

      dialogData: {},

      historyData: {},

      infoData: {},

      customData: {
        activeName: 'first',
        modality: false,
        videoList: [],
        statusType: '',
        masterItemId: '',
        nameType: '2',
        shangType: '2',
        videoDetail: {}, // 主图
        videoDetailFu: {}, // 商详
        radioId: ''
      },

      form: {
        // 主图
        videoName: '',
        videoDesc: '',
        videoUrl: '',
        // 商详
        videoNameFu: '',
        videoDescFu: '',
        videoUrlFu: ''
      },
      rules: {
        videoName: [
          { validator: videoNameDator, trigger: 'blur' }
        ],
        videoNameFu: [
          { validator: videoNameFuDator, trigger: 'blur' }
        ],
        videoUrl: [
          { validator: videoUrlDator, trigger: 'blur' }
        ],
        videoUrlFu: [
          { validator: videoUrlFuDator, trigger: 'blur' }
        ]
      }
    }
  },

  computed: {},

  watch: {},

  created() { },

  mounted() {
    this._FUNCTION_NAME = this.$route.name
    this.onInit()
  },

  beforeDestroy() { },

  methods: {

    onInit() {
      const self = this
      // 查询商品视频详情
      self.customData.masterItemId = self.$route.query.itemId
      const data = {
        masterItemId: self.customData.masterItemId
      }
      _api.videoDetail(self, data, self.callBack_videoDetail)
    },

    onSearch(data) {
      const self = this
    },

    onChangePage(data) {
      const self = this
    },

    onReset(data) {
      const self = this
    },

    onAdd(data) { },

    onDelete(data) {
      const self = this
    },

    onInfo(data) {
      const self = this
    },

    onUpdate(formName) {
      const self = this
    },

    onBathDelete() {
      const self = this
    },

    onBathUpdate() { },

    onDisable(data) {
      const self = this
    },

    onEnable(data) {
      const self = this
    },

    onUpload(data) { },

    onBathUpload() { },

    onExport(data) { },

    onDownload(data) { },

    onHistory(data) { },

    // 视频详情 的回调
    callBack_videoDetail(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '返回数据为空', 'warning')
      } else {
        if (data.data.videoList.length != 0) {
          data.data.videoList.forEach(item => {
            if (item.videoArea == 2) {
              self.customData.videoDetail = item
              self.form.videoName = item.videoName
              self.form.videoDesc = item.videoDesc
              if (_validate.checkEmpty(item.uploadId)) {
                self.form.videoUrl = item.samsVideoUrl
              } else {
                self.form.videoUrl = item.extDomain + item.videoPreview + item.uploadId
              }
            }
            if (item.videoArea == 1) {
              self.customData.videoDetailFu = item
              self.form.videoNameFu = item.videoName
              self.form.videoDescFu = item.videoDesc
              if (_validate.checkEmpty(item.uploadId)) {
                self.form.videoUrlFu = item.samsVideoUrl
              } else {
                self.form.videoUrlFu = item.extDomain + item.videoPreview + item.uploadId
              }
            }
          })
        }
        if (!_validate.checkEmpty(self.form.videoUrl)) {
          self.customData.nameType = '1'
        }
        if (!_validate.checkEmpty(self.form.videoUrlFu)) {
          self.customData.shangType = '1'
        }
      }
    }

  }
}
</script>

<style scoped>
.drawing_div{
    border-radius: 6px;
    background-color: #fbfdff;
    width: 300px;
    height: 150px;
    box-sizing:border-box;
    border:1px dashed #c0ccda;
    display:flex;
    justify-content: center;
    align-items: center;
}
.w30{
    width: 30%;
}
.listImg{
    float: left;
    margin-right: 20px;
}
</style>
